<html>
<head>
    <link type="text/css" href="./files/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
    <link rel='stylesheet' type='text/css' href='./files/fullcalendar-1.6.4/fullcalendar/fullcalendar.css' />
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript' src='./files/fullcalendar-1.6.4/fullcalendar/fullcalendar.js'></script>
    <script type='text/javascript' src='./files/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js'></script>
<script>

$(document).ready(function() {

    $('#calendar').fullCalendar({

			editable: true,

			events: "fetch_reminders.php",

			eventDrop: function(event, delta) {
        alert(event.title + ' was moved ' + delta + ' days\n' +
            '(should probably update your database)');
    },

			loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
    }

		});

	});

</script>
<style>

body {
    margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#loading {
		position: absolute;
		top: 5px;
		right: 5px;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json-events.php needs to be running in the same directory.</p>
</body>
</html>
